<template>
  <div class="container" ref="mainCon">
    <el-row
      class="toolbar searchInputWidth"
      style="padding-bottom: 0; padding-top: 24px !important"
    >
      <el-form :inline="true" :model="filterField" ref="searchConditions">
        <el-col :lg="8" :xl="6">
          <el-form-item label="项目名称" class="row-padding-bottom">
            <el-input
              v-model="filterField.projectName"
              placeholder="请输入项目名称"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="8" :xl="6">
          <el-form-item label="区域" class="row-padding-bottom">
            <el-cascader
              ref="manageArea"
              v-model="areaId"
              :options="areasOptions"
              @change="getAreaId"
              clearable
              filterable
              :props="{ checkStrictly: true }"
            ></el-cascader>
          </el-form-item>
        </el-col>
        <template v-if="advanced">
          <el-col :lg="8" :xl="6">
            <el-form-item label="行业" class="row-padding-bottom">
              <el-select
                v-model="filterField.industryId"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in industryOptions"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="开户银行" class="row-padding-bottom">
              <el-select
                v-model="filterField.bankId"
                filterable
                placeholder="请选择开户银行"
                clearable
              >
                <el-option
                  v-for="item in bankOptions"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="发薪年月" class="row-padding-bottom">
              <el-date-picker
                v-model="date"
                type="month"
                placeholder="选择年月"
                value-format="yyyy-MM"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="工资表状态" class="row-padding-bottom">
              <el-select
                v-model="filterField.status"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in salaryStatusOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item
              label="是否上传考勤表"
              class="row-padding-bottom lineFeedSty"
            >
              <el-select
                v-model="filterField.isAttFileStr"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in isFileStrArr"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item
              label="是否上传工人签字确认表"
              class="row-padding-bottom lineFeedSty"
            >
              <el-select
                v-model="filterField.isEmployeeFileStr"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in isFileStrArr"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item
              label="是否上传银行回执"
              class="row-padding-bottom lineFeedSty"
            >
              <el-select
                v-model="filterField.isBankFileStr"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in isFileStrArr"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="订单号">
              <el-input
                v-model="filterField.sequenceCode"
                placeholder="请输入订单号"
                clearable
              />
            </el-form-item>
          </el-col>
        </template>
        <el-col :lg="8" :xl="6">
          <el-form-item label="">
            <a
              @click="toggleAdvanced"
              style="margin-left: 40px; color: #409eff; cursor: pointer"
              class="btnColor"
            >
              {{ advanced ? '收起' : '展开' }}
              <i
                :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              ></i>
            </a>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="spacing"></div>
    <div
      ref="tableBox"
      :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
    >
      <el-table
        :data="tableList"
        v-loading="loading"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        style="border: 1px solid #dfe6ec"
        :max-height="tableHeight"
        border
        @sort-change="sortChange"
        ref="tableBox1"
      >
        <el-table-column label="工资表信息" width="230">
          <template slot-scope="scope">
            <p style="olor: rgb(96, 98, 102); font-weight: bold">
              {{ scope.row.year || '--' }}年{{ scope.row.month || '--' }}月第{{
                scope.row.batchNo || '--'
              }}批次工资
            </p>
            <p style="color: #999; font-size: 12px" v-show="!isHsUser()">
              创建日期： {{ scope.row.createTime || '--' }}
            </p>
            <p style="color: #999; font-size: 12px">
              订单号：{{ scope.row.sequenceCode }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="projectName" label="项目名称" width="230">
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.projectName"
              :columnName="'projectName'"
            ></copyText>
          </template>
        </el-table-column>
        <el-table-column
          prop="areaName"
          label="所属区域"
          align="center"
          :formatter="formatTd"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="industryName"
          label="行业"
          align="center"
          :formatter="formatTd"
        ></el-table-column>
        <el-table-column
          prop="bankName"
          label="开户银行"
          align="center"
          :formatter="formatTd"
          width="180"
        ></el-table-column>
        <el-table-column
          label="应发/到账工资总额(元)"
          prop="bankActPay"
          align="center"
          width="230"
        >
          <template slot-scope="scope">
            <p>
              ￥{{ scope.row.shouldPay || '0' }}/￥{{
                scope.row.bankActPay || '--'
              }}
            </p>
          </template>
        </el-table-column>
        <el-table-column
          label="应发/到账总人数"
          prop="bankActPayTotal"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <p>
              {{ scope.row.shouldPayTotal || '0' }}/{{
                scope.row.bankActPayTotal || '--'
              }}
            </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="statusDesc"
          label="工资表状态"
          align="center"
          :formatter="formatTd"
          width="210"
        >
          <template slot-scope="scope">
            <ul>
              <li>
                {{ scope.row.statusDesc }}
                <span
                  v-if="scope.row.sendTypeDesc"
                  class="generationMethod fontColorTheme fontBorderTheme"
                  >{{ scope.row.sendTypeDesc }}</span
                >
              </li>
            </ul>
          </template>
        </el-table-column>
        <!-- <el-table-column label="是否上传附件" align="center" width = "160">
            <template slot-scope="scope">
              <p>{{scope.row.isFileStr || '--'}}</p>
            </template>
          </el-table-column> -->
        <el-table-column label="是否上传考勤表" align="center" width="180">
          <template slot-scope="scope">
            <p>{{ scope.row.isAttFileStr || '--' }}</p>
          </template>
        </el-table-column>
        <el-table-column
          label="是否上传工人签字确认表"
          align="center"
          width="210"
        >
          <template slot-scope="scope">
            <p>{{ scope.row.isEmployeeFileStr || '--' }}</p>
          </template>
        </el-table-column>
        <el-table-column label="是否上传银行回执" align="center" width="180">
          <template slot-scope="scope">
            <p>{{ scope.row.isBankFileStr || '--' }}</p>
          </template>
        </el-table-column>
        <el-table-column label="app已确认人数" align="center" width="160">
          <template slot-scope="scope">
            <p>
              {{
                scope.row.confirmTotal === null ? '--' : scope.row.confirmTotal
              }}/{{ scope.row.shouldPayTotal || '--' }}
            </p>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="left"
          fixed="right"
          min-width="260"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="toDetail(scope.$index, scope.row, 'SH')"
              v-if="
                scope.row.status == 'JC_AUDIT' &&
                $store.state.userType == 'MONITOR'
              "
              >审核</el-link
            >
            <el-link
              type="primary"
              v-show="isShowDetail"
              @click="toDetail(scope.$index, scope.row)"
              >查看详情</el-link
            >
            <el-link
              type="primary"
              @click="toUploadFile(scope.$index, scope.row, 'SALARY_ATT')"
              >考勤表</el-link
            >
            <el-link
              type="primary"
              @click="toUploadFile(scope.$index, scope.row, 'SALARY_SIGN')"
              >工人签字确认表</el-link
            >
            <el-link
              type="primary"
              @click="toUploadFile(scope.$index, scope.row, 'SALARY_RECEIPT')"
              >银行回执</el-link
            >
            <el-link
              type="primary"
              @click="toOpenDialogReject(scope.$index, scope.row)"
              v-if="scope.row.status == 'REJECTED'"
              >驳回原因</el-link
            >
            <el-link
              type="primary"
              @click="confirmRelease(scope.$index, scope.row)"
              v-if="
                scope.row.statusDesc == '待发放' &&
                $store.state.userType == 'BANK' &&
                isEsUser()
              "
              >确认发放</el-link
            >
            <div
              class="manualPostbackBox"
              v-if="
                scope.row.status == 'NO_ISSUE' &&
                $store.state.userType == 'BANK' &&
                bankSalaryImport
              "
            >
              <div
                v-if="
                  !scope.row.bankManualStatus ||
                  scope.row.bankManualStatus == 'NO_IMPORT'
                "
              >
                <el-link type="primary">手动回传</el-link>
                <form class="upLoadDom">
                  <input
                    id="waterImportfileChangeCz"
                    type="file"
                    name="multipartFile"
                    @change="
                      waterImportfileChangeCz($event, scope.$index, scope.row)
                    "
                    title="手动回传"
                  />
                </form>
              </div>
            </div>
            <el-link
              type="primary"
              v-if="
                bankSalaryImport &&
                (scope.row.bankManualStatus == 'NO_SYNC' ||
                  scope.row.bankManualStatus == 'SYNCHRONIZED')
              "
              @click="toClearNetData(scope.row)"
              >清空实发数据</el-link
            >
            <el-link
              type="primary"
              v-if="bankSalaryImport && scope.row.bankManualStatus == 'NO_SYNC'"
              @click="toSyncData(scope.row)"
              >确认同步</el-link
            >
            <template v-if="isEsUser()">
              <el-link
                type="primary"
                @click="downloaDauthorization(scope.$index, scope.row)"
                v-show="
                  scope.row.typeDesc == '已发放' ||
                  scope.row.typeDesc == '待发放'
                "
                >下载授权单</el-link
              >
            </template>
          </template>
        </el-table-column>
        <!-- 表格数据为空时，页面显示 -->
        <div slot="empty" v-show="isShow">
          <emptyTable emptyText="暂无相关信息"></emptyTable>
        </div>
      </el-table>
    </div>
    <Pagination
      ref="pagination"
      @getList="getTableList"
      :filterField="filterField"
      :requestUrl="requestUrl"
      @getpageNo="getpageNo"
      @getpageSize="getpageSize"
    ></Pagination>
    <!-- 上传合同附件 -->
    <el-dialog
      title="工资表附件"
      width="900px"
      :visible.sync="uploadContract"
      :modal-append-to-body="false"
    >
      <contractEnclosure :isShowType="true" :tableData="uploadImg" />
    </el-dialog>
    <!-- 驳回原因弹框 -->
    <dialogRejectReason
      v-if="dialogRejectshow"
      @closeDia="getCloseDia"
      :salaryId="salaryId"
      :projectId="projectId"
      :updaterId="updaterId"
    ></dialogRejectReason>
    <!-- 确认发放 -->
    <el-dialog
      title="确认发放"
      :visible.sync="centerDialogVisible"
      width="640px"
      :modal-append-to-body="false"
    >
      <div>
        <p style="color: red">
          【确认发放】之后默认实际到账工资等于应发工资，如存在实际到账工资与应发工资不—致。建议您采用【手动回传】方式
        </p>
        <p class="itemPay">请核对工资表的数据是否正确</p>
        <p class="itemPay">
          应发工资总额：<span style="color: red">￥{{ shouldPay }}</span>
        </p>
        <p class="itemPay">
          应发工资人数：<span style="color: red">{{ shouldPayTotal }}人</span>
        </p>
      </div>
      <div slot="footer">
        <el-button class="cancel" @click="centerDialogVisible = false"
          >取 消</el-button
        >
        <el-button
          type="primary"
          class="save"
          style="width: 76px"
          @click="submitForm()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="上传失败"
      :visible.sync="formVisible"
      :close-on-click-modal="false"
      @close="closeDialog"
      custom-class="dialog-minwidth"
      :modal-append-to-body="false"
    >
      <div class="errorNoticeBox">
        <i class="icon iconfont iconshibai1"></i>
      </div>
      <div v-html="errorNotice" class="errorBox"></div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="closeDialog" class="save"
          >确认</el-button
        >
        <el-button @click.native="closeDialog" class="cancel">取消</el-button>
      </div>
    </el-dialog>
    <!-- 下载受理单 -->
    <div
      :style="{
        position: 'absolute',
        top: '1220px',
        display: centerVisible ? 'block' : 'none',
      }"
      id="authorizationSheet"
    >
      <table class="top-left">
        <tr>
          <td colspan="2" class="sheetTitle">工资发放授权单</td>
        </tr>
        <tr>
          <td colspan="2" class="clearfix">
            <div class="tr-left">
              <p>{{ offinePayDate.salaryInfo }}</p>
              <div v-if="isEsUser()" class="tr-left-tip">
                订单生成时间：{{ offinePayDate.createTime || '--' }}
              </div>
              <p>{{ offinePayDate.orderId }}</p>
            </div>
            <div class="tr-right">
              <div class="tr-right-top clearfix">
                <div class="tr-right-code fl">
                  <img class="srcCodeImg" :src="srcCode" alt />
                </div>
                <div class="tr-right-barCode fl">
                  <img class="barCodeCodeImg" :src="barCode" alt />
                </div>
              </div>
              <div class="tr-right-tip">
                提示：通过扫描二维码或条形码可快捷获取工资表订单
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2" class="projectInformation">项目信息</td>
        </tr>
        <tr>
          <td colspan="2" class="tdLeft">
            项目名称：{{ offinePayDate.projectName || '--' }}
          </td>
        </tr>
        <tr>
          <td colspan="2" class="tdLeft">
            建设方：{{ offinePayDate.pcName || '--' }}
          </td>
        </tr>
        <tr>
          <td class="tdLeft">施工方：{{ offinePayDate.pbName }}</td>
          <td class="tdLeft">
            施工方法人姓名：{{ offinePayDate.companyBoss || '--' }}
          </td>
        </tr>
        <tr>
          <td colspan="2" class="tdLeft">
            项目负责人姓名：{{ offinePayDate.projectAdmin || '--' }}
          </td>
        </tr>
        <tr>
          <td colspan="2" class="tdLeft">
            项目地址：{{ offinePayDate.address || '--' }}
          </td>
        </tr>
        <tr>
          <td class="tdLeft">专户账号：{{ offinePayDate.account || '--' }}</td>
          <td class="tdLeft">
            代发总人数：{{ offinePayDate.shouldCount || '--' }}人
          </td>
        </tr>
        <tr>
          <template v-if="isEsUser()">
            <td class="tdLeft">
              专户签约状态：<span
                :style="offinePayDate.signed === 0 ? 'color:red' : ''"
                >{{ offinePayDate.signed === 1 ? '已签约' : '未签约' }}</span
              >
            </td>
            <td class="tdLeft">
              代发总金额：{{ offinePayDate.shouldPay || '--' }}元
            </td>
          </template>
          <template v-else>
            <td colspan="2" class="tdLeft">
              代发总金额：{{ offinePayDate.shouldPay || '--' }}元
            </td>
          </template>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import common from '../../kits/common'
import { mapActions, mapState } from 'vuex'
import dialogRejectReason from '@/components/publicCom/dialogRejectReason'

export default {
  name: 'payrollList',
  components: {
    dialogRejectReason,
  },
  props: ['taskType'],
  data() {
    return {
      titleText: '',
      back: true,
      projectId: '',
      projectName: '',
      date: [],
      salaryStatusOptions: [], //工资表状态
      //表格数据
      tableList: [],
      requestUrl: 'api-su/cs/salary/expand/monitorSalaryList',
      areaId: '', //区域
      //搜索条件
      filterField: {
        projectName: '',
        areaId: '',
        industryId: '',
        bankId: '', //银行
        year: '',
        month: '',
        status: '',
        sequenceCode: '',
        // isFileStr: '',
        isAttFileStr: '', //考勤
        isEmployeeFileStr: '', //工人签字
        isBankFileStr: '', //银行回执
      },
      isFileStrArr: [
        {
          id: '1',
          name: '是',
        },
        {
          id: '0',
          name: '否',
        },
      ],
      pageSize: 20,
      pageNo: 1,
      isShow: false, //列表加载
      centerDialogVisible: false,
      loading: true,
      uploadImg: [],
      saveImgArr: [],
      srcList: [],
      oldSrcList: [],
      uploadContract: false, //上传合同附件
      salaryId: '', //工资id
      formVisible: false,
      isShowDetail: '',
      shouldPay: '',
      shouldPayTotal: '',
      bankOptions: [],
      dialogRejectshow: false,
      updaterId: '',
      flieUpload: {
        salaryId: '',
        projectId: '',
      },
      bankSalaryImport: false,
      advanced: false,
      hiddleToolBar: false,
      tableHeight: null,
      centerVisible: false,
      salaryIdTwo: '',
      id: '',
      offinePayDate: '',
    }
  },
  computed: { ...mapState(['areasOptions', 'industryOptions']) },
  created() {
    this.filterField.status = this.$route.query.status
      ? this.$route.query.status
      : ''
    this.filterField.areaId = this.$route.query.areaId
      ? this.$route.query.areaId
      : ''
    this.areaId = this.$route.query.areaId ? this.$route.query.areaId : ''
    this.filterField.projectName = this.$route.query.projectName
      ? this.$route.query.projectName
      : ''
    this.filterField.year = this.$route.query.year ? this.$route.query.year : ''
    this.filterField.status = this.$route.query.status
      ? this.$route.query.status
      : ''
    if (this.$route.query.month && this.filterField.year) {
      this.filterField.month =
        this.$route.query.month > 9
          ? this.$route.query.month
          : '0' + this.$route.query.month
      this.date = this.filterField.year + '-' + this.filterField.month
    }
    this.getSalaryStatus()
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
    this.getBank()
    this.getIndustry({})
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.getBankSalaryDetail()
    this.isShowDetail =
      this.$store.state.buttonLimitsArr.indexOf('mCsSalaryList:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('mProjectList:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('projectList:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('bankSalaryPayList:detail') >
        -1 ||
      this.$store.state.buttonLimitsArr.indexOf('projectListJSF:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('projectListSGF:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('TBankSalaryPayList:detail') >
        -1
  },
  activated() {
    window.addEventListener('scroll', this.handleScroll, true)
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
      this.$refs.tableBox1.doLayout()
    })
  },
  deactivated() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  beforeDestroy() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
    let that = this
    this.$nextTick(function () {
      let tableHeightCur = this.$refs.tableBox1.$el.clientHeight
      let tableTop = this.$refs.tableBox.getBoundingClientRect().top
      if (tableHeightCur + tableTop > window.innerHeight) {
        this.tableHeight =
          this.$refs.mainCon.getBoundingClientRect().height - 86
      } else {
        document.getElementsByClassName('tableBoxCur').length &&
          (document.getElementsByClassName('tableBoxCur')[0].style.height =
            window.innerHeight - tableTop - 28 + 'px')
      }

      window.onresize = function () {
        if (!that.$refs.tableBox1) {
          return
        }
        let tableHeightCur = that.$refs.tableBox1.$el.clientHeight
        let tableTop = that.$refs.tableBox.getBoundingClientRect().top
        if (tableHeightCur + tableTop > window.innerHeight) {
          that.tableHeight =
            that.$refs.mainCon.getBoundingClientRect().height - 86
        } else {
          document.getElementsByClassName('tableBoxCur').length &&
            (document.getElementsByClassName('tableBoxCur')[0].style.height =
              window.innerHeight - tableTop - 40 + 'px')
        }
      }
    })
  },
  methods: {
    /**
     * @description: 下载授权单
     */
    async downloaDauthorization(index, row) {
      this.centerVisible = true
      this.salaryIdTwo = row.id
      this.updaterId = row.updaterId
      this.id = row.sequenceCode
      this.getBarimage()
      this.getQrimage()
      await this.getOffinePayDate()
      this.$nextTick(() => {
        this.toAuthorize()
      })
    },
    toAuthorize() {
      this.getPdf('authorizationSheet', '工资代发授权单')
      this.centerVisible = false
    },
    /**
     * @description: 线下代发页面数据
     */
    getOffinePayDate() {
      const vm = this
      return vm
        .axios({
          method: 'post',
          url: 'api-su/cs/salary/expand/ustxx',
          data: {
            id: vm.salaryIdTwo,
          },
        })
        .then((res) => {
          if (!res.data.hasError) {
            vm.offinePayDate = res.data.result
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'warning',
            })
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取数据失败',
            type: 'error',
          })
        })
    },
    /**
     * @description: 线下代发页面条形码
     */
    getBarimage() {
      const vm = this
      vm.barCode =
        common.commonApi + 'api-su/cs/salary/expand/barimage?info=' + vm.id
    },
    /**
     * @description: 线下代发页面二维码
     */
    getQrimage() {
      const vm = this
      vm.srcCode =
        common.commonApi + 'api-su/cs/salary/expand/qrimage?info=' + vm.id
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    /**
     * @description: 银行端确认发放
     */
    submitForm() {
      this.axios({
        method: 'post',
        url: 'api-su/cs/salary/expand/confirmPaySalary',
        data: {
          salaryId: this.salaryId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '确认发放成功',
            })
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
          }
          this.centerDialogVisible = false
          this.$nextTick(function () {
            this.$refs.pagination.getTableListData()
          })
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '确认发放失败',
            type: 'error',
          })
          this.centerDialogVisible = false
          this.$nextTick(function () {
            this.$refs.pagination.getTableListData()
          })
        })
    },
    ...mapActions(['getAreas', 'getIndustry']),
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },

    toUploadFile(index, row, type) {
      this.salaryId = row.id
      this.uploadImg = []
      this.saveImgArr = []
      this.srcList = []
      this.oldSrcList = []
      this.getUploadSearchImg(this.salaryId, type)
      this.uploadContract = true
    },
    // 获取附件查询图片
    getUploadSearchImg(salaryId, type) {
      var data = {
        associatedName: 'T_CS_SALARY',
        associatedId: salaryId,
        fileType: type,
      }
      this.axios({
        method: 'post',
        url: '/api-su/cs/salary/expand/salaryFilelist',
        data: data,
      })
        .then((response) => {
          // this.bankData = response.data;
          if (!response.data.hasError) {
            this.uploadImg = response.data.result

            // for (var i = 0; i < this.uploadImg.length; i++) {
            //   this.saveImgArr.push({
            //     originalName: this.uploadImg[i].originalName,
            //     relativePath: this.uploadImg[i].relativePath,
            //     fileSize: this.uploadImg[i].fileSize,
            //     fileType: this.uploadImg[i].fileType
            //   });
            //   this.srcList.push(this.uploadImg[i].absolutePath);
            //   this.oldSrcList.push(this.uploadImg[i].absolutePath);
            // }
          } else {
            this.$message({
              type: 'error',
              message: '数据获取失败',
            })
          }
        })
        .catch((error) => {})
    },
    enlargeImg(index) {
      this.srcList = this.oldSrcList
      var demo = this.srcList
      var frontArr = demo.slice(0, index)
      var behindArr = demo.slice(index, demo.length)
      var list = behindArr.concat(frontArr)
      this.srcList = list
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    getSalaryStatus() {
      //获取工资表状态
      this.axios({
        method: 'post',
        url: 'api-su/cs/salary/expand/status',
        data: {},
      })
        .then((res) => {
          this.salaryStatusOptions = res.data.result
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取工资表状态数据失败',
            type: 'error',
          })
        })
    },
    // 搜索
    searchList() {
      this.pageSize = 20
      this.pageNo = 1
      if (this.date && this.date.length > 0) {
        let tempDate = this.date.split('-')
        this.filterField.year = tempDate[0]
        this.filterField.month = tempDate[1]
      } else {
        this.filterField.year = ''
        this.filterField.month = ''
      }
      this.$refs.pagination.getTableListData()
    },
    //跳转详情
    toDetail(index, row, isSH) {
      var queryData = {
        salaryId: row.id,
        yearQuery: row.year,
        monthQuery: row.month,
        batchNo: row.batchNo,
        statusQuery: row.status,
        sequenceCode: row.sequenceCode,
        projectId: row.projectId,
        rejectReason: row.rejectReason,
        mark: 'payrollList',
        isSH: isSH,
        taskType: this.taskType,
      }
      this.$router.push({
        path: '/home/salaryDf/salaryPayBatchDetailList',
        name: 'salaryPayBatchDetailList',
        query: queryData,
      })
      var oldUrl =
        this.taskType == 'salary'
          ? '/home/salaryDf/salaryPayListTabTwo'
          : '/home/salaryDf/salaryPayListTab'
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: oldUrl,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },
    getBank() {
      var data = {
        type: 'BANK_TYPE',
      }
      this.axios({
        method: 'post',
        url: 'api-bs/base/dicitem/findbytype',
        data: data,
      })
        .then((response) => {
          this.bankOptions = response.data.result
        })
        .catch((error) => {
          console.log(error)
        })
    },
    toOpenDialogReject(index, row) {
      this.salaryId = row.id
      this.updaterId = row.updaterId
      this.projectId = row.projectId
      this.dialogRejectshow = true
    },
    /**
     * @description: 银行端确认发放
     */
    confirmRelease(index, row) {
      this.salaryId = row.id
      this.shouldPay = row.shouldPay
      this.shouldPayTotal = row.shouldPayTotal
      this.centerDialogVisible = true
    },
    //关闭弹框
    getCloseDia() {
      this.dialogRejectshow = false
    },
    closeDialog() {
      this.formVisible = false
    },
    // 银行手动回传 ------start
    waterImportfileChangeCz(e, index, row) {
      var that = this
      var url = window.location.href
      var Filedata = e.target.value
      that.flieUpload.salaryId = row.id
      that.flieUpload.projectId = row.projectId
      if (!/\.(xls|xlsx)$/.test(Filedata)) {
        this.$message({
          message: 'excel类型必须是.xls,xlsx中的一种',
          type: 'warning',
        })
        document.getElementById('waterImportfileChangeCz').value = ''
        return
      }

      setTimeout(function () {
        that.uploadFileByAjaxSubmitCz(
          'api-su/bank/manual/salaryImport',
          that.successCz,
          that.errorCz,
          e,
          row
        )
      }, 500)
    },
    uploadFileByAjaxSubmitCz(url, successCallBack, errorCallBack, e, row) {
      const vm = this
      var token = localStorage.getItem('access_token')
      var options = {
        url: common.uploadUrl + url,
        type: 'POST',
        dataType: 'json',
        data: vm.flieUpload,
        headers: { Authorization: 'Bearer ' + token },
        success: function (data) {
          e.target.value = ''
          successCallBack(data, row)
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          e.target.value = ''
          errorCallBack(XMLHttpRequest, textStatus, errorThrown)
        },
      }

      //三种方式均可
      // $("#waterImportBox").ajaxSubmit(options);
      $(e.target.form).ajaxSubmit(options)
      return false
    },
    handleMsgLen(msg, len) {
      var new_msgName = ''
      if (msg.length > len) {
        new_msgName = msg.substring(0, len)
        new_msgName += '...'
      } else {
        new_msgName = msg
      }
      return new_msgName
    },
    successCz(data, row) {
      if (!data.hasError) {
        this.$message({
          message: data.msg,
          type: 'success',
        })
        this.$refs.pagination.getTableListData()
      } else {
        this.errorNotice = this.handleMsgLen(data.errorMsg, 200)
        this.formVisible = true
      }
    },
    //根据状态码判断是否是401
    errorCz(XMLHttpRequest, textStatus, errorThrown) {
      if (XMLHttpRequest.status === '401' || XMLHttpRequest.status === '403') {
        localStorage.setItem('access_token', '')
        localStorage.setItem('refresh_token', '')
        localStorage.setItem('userName', '')
        // 只有在当前路由不是登录页面才跳转
        if (router.currentRoute.path !== '/login/loginFirst') {
          router.replace({
            path: '/login/loginFirst',
          })
        }
        //清除tab栏数据
        this.$store.state.sliderBar = []
        localStorage.removeItem('sliderBar')
      } else {
        this.$message({
          message: '数据请求失败',
          type: 'warning',
        })
      }
    },
    //工资流水
    getBankSalaryDetail() {
      this.axios({
        method: 'post',
        url: 'api-m/paramconfig/findbyname',
        data: {
          name: 'bankSalaryDetail',
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            if (res.data.result.value == '1') {
              this.bankSalaryImport = true
            } else {
              this.bankSalaryImport = false
            }
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '数据请求失败，请重试',
            type: 'error',
          })
        })
    },
    // 清空实发数据
    toClearNetData(row) {
      this.$confirm('确认清除实发数据?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.clearNetData(row)
        })
        .catch(() => {})
    },
    clearNetData(row) {
      this.axios({
        method: 'post',
        url: 'api-su/bank/manual/czbsclean',
        data: {
          salaryId: row.id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              message: response.data.msg,
              type: 'success',
            })
            this.$refs.pagination.getTableListData()
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'warning',
            })
          }
        })
        .catch((error) => {})
    },
    // 确认同步
    toSyncData(row) {
      this.$confirm('确认同步?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.syncData(row)
        })
        .catch(() => {})
    },
    syncData(row) {
      this.axios({
        method: 'post',
        url: 'api-su/bank/manual/czbanksync',
        data: {
          salaryId: row.id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              message: response.data.msg,
              type: 'success',
            })
            this.$router.push({
              path: '/home/salaryDf/salaryPayBatchDetailList',
              name: 'salaryPayBatchDetailList',
              query: {
                projectId: row.projectId,
                projectName: row.projectName,
                salaryId: row.id,
                yearQuery: row.year,
                statusQuery: row.status,
                from: this.message,
                batchNoInfo:
                  row.year +
                  '年' +
                  row.month +
                  '月第' +
                  row.batchNo +
                  '批次工资',
                mark: 'payrollList',
                monthQuery: row.month,
                batchNo: row.batchNo,
              },
            })
            this.$store.commit('CHANGE_SLIDER_NAME', {
              oldUrl: '/home/salaryDf/salaryPayListTab',
              newUrl: this.$router.currentRoute.fullPath,
            })
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'warning',
            })
          }
        })
        .catch((error) => {})
    },
    handleScroll(e) {
      this.$nextTick(function () {
        if (
          this.$refs.tableBox &&
          this.$refs.tableBox.getBoundingClientRect().top < 128
        ) {
          // this.tableHeight = this.$refs.mainCon.getBoundingClientRect().height - 84
          this.tableHeight = window.innerHeight - 218

          if (document.getElementsByClassName('tableBoxCur').length) {
            document.getElementsByClassName('tableBoxCur')[0].style.height =
              null
          }
          this.hiddleToolBar = true
        } else {
          this.hiddleToolBar = false
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.titleBox {
  background: #e4ebf1;
  padding: 15px 24px;
  border-bottom: 0;
  margin-bottom: 0;
  .blockTitle {
    font-weight: bold;
    font-size: 18px;
    color: #333;
    line-height: 40px;
    .iconfanhui1 {
      font-size: 20px;
      margin-right: 6px;
      cursor: pointer;
    }
  }
  .code {
    font-size: 14px;
    color: #666;
    margin-left: 30px;
  }
  .goSeeDetail {
    font-size: 14px;
    margin-left: 30px;
  }
}
.uploadBox {
  text-align: center;
  padding: 20px;
}
.imgStyle {
  margin-top: 20px;
  li {
    position: relative;
    margin-right: 20px;
    margin-top: 10px;
    i {
      position: absolute;
      right: -6px;
      top: -10px;
      font-size: 20px;
    }
  }
}

.manualPostbackBox {
  position: relative;
  display: inline-block;
  .upLoadDom {
    position: absolute;
    width: 96px;
    height: 25px;
    top: 0;
    left: 0;
    opacity: 0;
    line-height: 0px;
    form {
      input {
        width: 96px;
        height: 25px;
        line-height: 0px;
        cursor: pointer;
      }
    }
  }
}
.errorNoticeBox {
  text-align: center;
  margin-bottom: 24px;
  i {
    color: red;
    font-size: 50px;
  }
}
.errorBox {
  line-height: 24px;
}
.itemPay {
  margin-top: 16px;
  color: #333;
}
.generationMethod {
  display: inline-block;
  width: 60px;
  line-height: 20px;
  border: 1px solid #009588;
  font-size: 12px;
  color: #009588;
}
.lineFeedSty {
  /deep/.el-form-item__label {
    line-height: normal !important;
  }
}
.downshoulidan {
  /deep/ .el-dialog__header {
    padding: 0 !important;
    border-bottom: 0px;
  }
}
#authorizationSheet {
  width: 720px;
  height: 413px;
  text-align: center;
  margin: auto;

  .sheetTitle {
    font-family: SourceHanSansCN-Medium;
    font-size: 24px;
    color: #1f803b;
    background-color: #eaf6ec;
  }

  .top-left {
    width: 720px;
    height: 413px;
    border: 1px solid #1f803b;
    border-collapse: collapse;
    td {
      border: 1px solid #1f803b;
    }
  }
}
.tr-left {
  float: left;
  font-family: SourceHanSansCN-Bold;
  font-size: 20px;
  color: #218b3d;
  margin-left: 10px;
  position: relative;
  p:first-child {
    padding: 10px.0;
  }
  p:last-child {
    width: 340px;
    height: 51px;
    line-height: 51px;
    font-family: SourceHanSansCN-Bold;
    font-size: 30px;
    color: #1f803b;
    background: #eaf6ec;
  }
  .tr-left-tip {
    font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    color: #1f803b;
    line-height: 14px;
    position: absolute;
    bottom: -20px;
    left: 10px;
  }
}
.tr-right {
  float: left;
  margin-left: 70px;
  &-top {
    width: 291px;
    // height: 66.4px;
    // margin-top: 10px;
  }
  &-tip {
    font-family: SourceHanSansCN-Regular;
    font-size: 12px;
    color: #333333;
    // margin-top: 10px;
    line-height: 14px;
  }
  &-code {
    width: 100px;
    height: 100px;
  }
  &-barCode {
    width: 160px;
    height: 58px;
    margin-top: 20px;

    margin-left: 17.7px;
  }
}
.projectInformation {
  background: #eaf6ec;
  font-family: SourceHanSansCN-Medium;
  font-size: 14px;
  color: #1f803b;
}
.tdLeft {
  padding-left: 20px;
  text-align: left;
  font-family: SourceHanSansCN-Regular;
  font-size: 14px;
  color: #1f803b;
}
.srcCodeImg {
  width: 100%;
  height: 100%;
}
.barCodeCodeImg {
  width: 100%;
  height: 100%;
}
@import '../../../static/css/filterArea.less';
</style>
